import React from 'react';
import {Link} from 'react-router';
import config from '../../config';
import {CANCEL_ORDER,FETCH_ORDER_LIST} from '../../constants/userTypes'

/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import NoData from '../../components/NoData/NoData';
import Panel from '../../components/Panel/Panel';

/**
 * 加载样式或图片文件
 * */
import './sass/orderDetail.scss';
// import 'antd/lib/tabs/style/index.less';

class OrderDetail extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        // this.handleChangeTab = this.handleChangeTab.bind(this);
        this.state = {
            curStatus: 0
        };
    }

    componentDidMount() {
        const {actions} = this.props;
        let data = {
            payStatus: '',
            signStatus: '',
            page: 1,
            size: 5
        };
        actions.fetchOrderList(data).then(res=>{
            if(res.type === FETCH_ORDER_LIST){
                console.log("订单列表获取成功");
            }
        });
    }

    handleChangeTab(index) {
        const {actions} = this.props;

        if (index === this.state.curStatus) return;
        this.setState({
            curStatus: index
        });
        let data = {
            payStatus: '',
            signStatus: '',
            page: 1,
            size: 5
        };
        switch (index){
            case 0:
                break;
            case 1:
                data.payStatus = 101;
                break;
            case 2:
                data.signStatus = 101;
                break;
            case 3:
                data.signStatus = 102;
                break;
            case 4:
                data.payStatus = 103;
                break;
            default:
                break;
        }

        actions.fetchOrderList(data);
    }

    handleGoPay(number,payPrice){
        console.log(arguments)
        this.context.router.push({
            pathname:"/activityList/"+number+"/payType",
            state: {
                number:number,
                payPrice: payPrice
                // curMember:this.state.curMember
            }
        })
    }
    handleCancelOrder(number){
        const {actions} = this.props;
        if(confirm('确认取消改订单?')){

            actions.cancelOrder({number:number}).then(res=>{
                if(res.type === CANCEL_ORDER){
                    if(res.data.code == 20000){
                        alert('已取消');
                    }
                }
            });
        }

    }

    render() {
        const {actions, user, home} = this.props;
        return (
            <MainSection className="act-man" title="订单详情">
               
                <div className="order-list">

                    {
                        user.orderList.length ? user.orderList.map((item, index)=> {
                            return (
                                <div key={index} className="order-item">
                                    <div className="title">
                                        <span>订单编号: {item.number}</span>
                                        <span className={"status style" + item.payStatus}>
                                            {config.ORDER_STATUS[item.payStatus]}
                                        </span>
                                    </div>
                                    <div className="act-info">
                                        <img src={item.image} alt=""/>
                                        <div>
                                            <p className="act-title">{item.name}</p>
                                            <p className="act-price">¥ {item.price/100}</p>
                                        </div>
                                    </div>
                                    <div className="total">
                                        共{Math.ceil(item.payPrice/item.price)}位儿童 合计:¥ <span>{item.payPrice/100}</span>
                                    </div>
                                    {
                                        [101].indexOf(parseInt(item.payStatus)) > -1 ? (
                                            <div className="control-bar">
                                                <button className="cancel" onClick={this.handleCancelOrder.bind(this,item.number)}>取消订单</button>
                                                <button className="confirm" onClick={this.handleGoPay.bind(this,item.number,item.payPrice)}>立即支付</button>
                                            </div>
                                        ) : null
                                    }
                                </div>
                            )
                        }) : (
                            <NoData />
                        )
                    }
                </div>

            </MainSection>
        );
    }
}

export default OrderDetail;